<template>
  <div class="reportable">
    <h2>{{title}}{{showType=='time'?'分时':(showType=='distr'?'分布':'入店率')}}表</h2>
    <div id="table-div">
      <div class="table-header-div">
        <table id="table-header" :style="'width:'+tableBodyWidth+'px'">
          <col v-for="item in column"
               :key="item.key"
               :name="item.key"
               :width="item.width + 'px'">
          <tr>
            <th v-for="item in column">
              <span class="table-centent"
                    :class="[item.align == 'left' ? 'isLeft' : item.align == 'right' ? 'isRight' : 'isCenter']"
                    style="width:100%;display: inline-block;">
                <span class="center-span">{{item.name}}</span>
              </span>
            </th>
          </tr>
        </table>
      </div>

      <div class="table-body-div">
        <table id="table-body" :style="'width:'+tableBodyWidth+'px'">
          <col v-for="item in column"
               :key="item.key"
               :name="item.key"
               :width="item.width + 'px'">
          <tr v-for="items in tableData">
            <td v-for="item in items"
                :rowspan="item.rowspan ? item.rowspan : 1"
                :colspan="item.colspan ? item.colspan : 1">
              <span class="table-centent"
                    :class="[item.align == 'left' ? 'isLeft' : item.align == 'right' ? 'isRight' : 'isCenter',item.isCenterValue ? 'isCenterValue' : '']"
                    style="width:100%;display: inline-block;">
                <span :class="[item.max ? 'isMax' : item.min ? 'isMin' : '']"
                      class="center-span"
                      style="min-width:68px">
                  {{item.value}}
                </span>
              </span>
            </td>
          </tr>
        </table>
      </div>

      <div class="table-header-fixed-left">
        <table id="frozen-header-left" :style="'width:'+tableFixedLeftWidth+'px'">
          <col v-for="item in column"
               v-if="item.frozen == 'left'"
               :key="item.key"
               :name="item.key"
               :width="item.width + 'px'">
          <tr>
            <th v-for="item in column"
                v-if="item.frozen === 'left'">
              <span class="table-centent"
                    :class="[item.align == 'left' ? 'isLeft' : item.align == 'right' ? 'isRight' : 'isCenter']"
                    style="width:100%;display: inline-block;">
                <span class="center-span">
                  {{item.name}}
                </span>
              </span>
            </th>
          </tr>
        </table>
      </div>
      <div class="table-body-fixed-left">
        <table id="frozen-body-left" :style="'width:'+tableFixedLeftWidth+'px'">
          <col v-for="item in column"
               v-if="item.frozen == 'left'"
               :key="item.key"
               :name="item.key"
               :width="item.width + 'px'">
          <tr v-for="items in tableData">
            <td v-for="item in items"
                v-if="item.frozen === 'left'"
                :rowspan="item.rowspan ? item.rowspan : 1">
              <span class="table-centent"
                    :class="[item.align == 'left' ? 'isLeft' : item.align == 'right' ? 'isRight' : 'isCenter']"
                    style="width:100%;display: inline-block;">
                <span class="center-span">
                  {{item.value}}
                </span>
              </span>
            </td>
          </tr>
        </table>
      </div>

      <div class="table-header-fixed-right">
        <table id="frozen-header-right" :style="'width:'+tableFixedRightWidth+'px'">
          <col v-for="item in column"
               v-if="item.frozen == 'right'"
               :key="item.key"
               :name="item.key"
               :width="item.width + 'px'">
          <tr>
            <th v-for="item in column"
                v-if="item.frozen === 'right'">
              <span class="table-centent"
                    :class="[item.align == 'left' ? 'isLeft' : item.align == 'right' ? 'isRight' : 'isCenter']"
                    style="width:100%;display: inline-block;">
                <span class="center-span">
                  {{item.name}}
                </span>
              </span>
            </th>
          </tr>
        </table>
      </div>
      <div class="table-body-fixed-right">
        <table id="frozen-body-right" :style="'width:'+tableFixedRightWidth+'px'">
          <col v-for="item in column"
               v-if="item.frozen == 'right'"
               :key="item.key"
               :name="item.key"
               :width="item.width + 'px'">
          <tr v-for="items in tableData">
            <td v-for="item in items"
                :rowspan="item.rowspan ? item.rowspan : 1"
                v-if="item.frozen === 'right'">
              <span class="table-centent"
                    :class="[item.align == 'left' ? 'isLeft' : item.align == 'right' ? 'isRight' : 'isCenter']"
                    style="width:100%;display: inline-block;">
                 <span class="center-span">
                  {{item.value}}
                </span>
              </span>
            </td>
          </tr>
        </table>
      </div>

      <div class="scroll-width"></div>
    </div>
  </div>
</template>

<script>
  export default {
    props:{
      title:{
        default(){
          return '案场'
        }
      },
      showType:{
        default(){
          return 'time'
        }
      },
      show_kpislist:{
        default(){
          return []
        }
      }
    },
    data: function () {
      return {
        column:[],
        tableData: [
          {
            case_info_name:{
              value:'案场名称',
              rowspan:1,
              frozen:true,
              align:'left',
              width:100,
            },
            case_code:{
              value:'案场编号',
              rowspan:1,
              frozen:true,
              align:'left',
              width:100,
            },
            area_name:{
              value:'区域名称',
              rowspan:1,
              frozen:true,
              align:'left',
              width:100,
            },
            kpi_name:{
              value:'指标',
              rowspan:1,
              frozen:true,
              align:'left',
              width:100,
            },
            value:{
              value:'',
              rowspan:1,
              frozen:true,
              align:'left',
            },
            avg:{
              value:'平均',
              rowspan:1,
              frozen:true,
              align:'left',
              width:100,
            },
            sum:{
              value:'小计',
              rowspan:1,
              frozen:true,
              align:'left',
              width:100,
            }
          },
          {
            case_info_name:{
              value:'暂无数据',
              colspan:7,
              align:'center',
            },
          }
        ],

        tableBodyWidth:0,//表格总宽度
        tableFixedLeftWidth:0,//左侧固定表格宽度
        tableFixedRightWidth:0,//右侧固定表格宽度

        scrollBarWidth:0,//浏览器滚动条的宽度
      }

    },
    created(){
      this.scrollBarWidth = this.getScrollbarWidth() //获取浏览器滚动条的宽度
    },
    mounted(){
      let _this = this
      $(window).resize(function(){
        _this.initTable()
      });
    },
    methods:{
      //拿到穿来的数据，进行整理
      getTableData(data,column,showType){
        // console.log(data,'data');
        // console.log(column,'column');
        let tableBodyWidth = 0;
        let tableFixedLeftWidth = 0;
        let tableFixedRightWidth = 0;
        for(let i in column){
          tableBodyWidth += column[i].width ? column[i].width : 100
          if(column[i].frozen == 'left'){
            tableFixedLeftWidth += column[i].width ? column[i].width : 100
          }
          if(column[i].frozen == 'right'){
            tableFixedRightWidth += column[i].width ? column[i].width : 100
          }
        }
        // console.log(tableBodyWidth,'tableBodyWidth');
        // console.log(tableFixedLeftWidth,'tableFixedLeftWidth');
        // console.log(tableFixedRightWidth,'tableFixedRightWidth');
        this.tableBodyWidth = tableBodyWidth
        this.tableFixedLeftWidth = tableFixedLeftWidth
        this.tableFixedRightWidth = tableFixedRightWidth
        this.column = column

        for(let i in data){
          for(let j in data[i]){
            for(let k in column){
              if(j == column[k].key){
                data[i][j].frozen = column[k].frozen
                data[i][j].align = column[k].align ? column[k].align : 'center'
                data[i][j].width = column[k].width ? column[k].width : 100
              }
            }
          }
        }
        this.tableData = data
        // console.log(this.tableData,'tableData');
        this.$nextTick(()=>{
          this.initTable(showType)
        })
      },
      //初始化表格
      initTable(showType){

        const _this = this
        const $tableDiv = $('#table-div')//总父级div
        const $tableHeaderDiv = $('.table-header-div')//固定头部 table
        const $tableBodyDiv = $('.table-body-div')//固定内容 table
        const $tableBodyFixedLeft = $('.table-body-fixed-left');//冻结列左侧头部
        const $tableBodyFixedRight = $('.table-body-fixed-right');//冻结列左侧头部
        const $tableHeaderFixedRight = $('.table-header-fixed-right');//冻结列左侧头部

        const $tableHeader = $('#table-header')//主header
        const $tableHeaderTr = $tableHeader.find('tr')
        const $tableBody = $('#table-body');//主body
        const $tableBodyTr = $tableBody.find('tr')

        const $frozenHeaderLeft = $('#frozen-header-left')
        const $frozenHeaderLeftTr = $frozenHeaderLeft.find('tr')
        const $frozenHeaderRight = $('#frozen-header-right')
        const $frozenHeaderRightTr = $frozenHeaderRight.find('tr')

        const $frozenBodyLeft = $('#frozen-body-left')
        const $frozenBodyLeftTr = $frozenBodyLeft.find('tr')
        const $frozenBodyRight = $('#frozen-body-right')
        const $frozenBodyRightTr = $frozenBodyRight.find('tr')

        const $scrollWidth = $('.scroll-width')
        let scrollBarWidth = this.scrollBarWidth

        let tableWidth = $tableDiv.width();//table总宽度
        let tableHeaderWidth = $tableHeader.width();//
        let frozenHeaderLeftWidth = $frozenHeaderLeft.width();//
        let frozenHeaderRigthWidth = $frozenHeaderRight.width();//

        let headerTh_arr = $tableHeader.find('th')
        let bodyTr_arr = $tableBody.find('tr')
        let frozenHeaderLeftTh = $frozenHeaderLeft.find('th').length
        let frozenHeaderRightTh = $frozenHeaderRight.find('th').length
        let isCenterValue = $('.isCenterValue')
        let tableHeaderTh = headerTh_arr.length

        console.log(tableWidth,'tableWidth');
        console.log(tableHeaderWidth,'tableHeaderWidth');
        if(showType == 'time'){
          let startNum = frozenHeaderLeftTh
          let endNum = tableHeaderTh - frozenHeaderRightTh - 1
          let centerNum = tableHeaderTh - frozenHeaderLeftTh - frozenHeaderRightTh
          let apartWidth = tableWidth - frozenHeaderLeftWidth - frozenHeaderRigthWidth;
          let thWidth = Math.ceil(apartWidth / centerNum)
          //判断如果总table的宽度大于内部table的宽度的时候，应该将内部table的数据列加宽，使总table和内部table等宽
          if(tableWidth > tableHeaderWidth){
            this.tableBodyWidth = tableWidth
            headerTh_arr.each(function (i){
              if(i >= startNum && i <= endNum){
                _this.column[i].width = thWidth
              }
            })
          }
        }else{
          let bodyFirstTr_Td = $($tableBody.find('tr')[0]).find('td')
          let $tableHeaderDivCol = $tableHeaderDiv.find('col')
          let $tableBodyDivCol = $tableBodyDiv.find('col')

          let fixedWidth = 0;//表格前面几列固定的宽度
          let kpislistLength = this.show_kpislist.length;//指标个数
          bodyFirstTr_Td.each(function (i) {
            //获取到从第几列开始为isCenterValue
            if(!$(this).children().hasClass("isCenterValue")){
              fixedWidth += $(this).width()
            }
          })
          //判断如果总table的宽度大于内部table的宽度的时候，应该将内部table的数据列加宽，使总table和内部table等宽
          if(tableWidth > tableHeaderWidth){
            let thWidth = (tableWidth - fixedWidth) / kpislistLength
            this.tableBodyWidth = tableWidth
            bodyFirstTr_Td.each(function (i) {
              //获取到从第几列开始为isCenterValue
              if($(this).children().hasClass("isCenterValue")){
                $tableHeaderDivCol[i].width = thWidth + 'px'
                $tableBodyDivCol[i].width = thWidth + 'px'
              }
            })
          }
        }

        let isScrollX = $tableBody.width() > $tableBody.parent().width() ? true : false //是否有横向滚动条
        let isScrollY = ($tableBody.height() > $tableBody.parent().height() && !isScrollX) ||
        ($tableBody.height() > $tableBody.parent().height() - scrollBarWidth && isScrollX) ?
          true : false//是否有竖向滚动条

        let headerHeight = $tableHeader.height()
        $frozenBodyLeft.css('margin-top',headerHeight + 'px')
        $frozenBodyRight.css('margin-top',headerHeight + 'px')
        $scrollWidth.css('height',headerHeight + 'px')

        //先判断是否有竖向滚动条;
        if(isScrollY){
          $scrollWidth.show()
          //根据获取到的滚动条宽度设置css
          $scrollWidth.css('width',scrollBarWidth + 'px')
          $tableHeaderDiv.css('margin-right',scrollBarWidth + 'px')
          $tableHeaderFixedRight.css('right',scrollBarWidth + 'px')
          $tableBodyFixedRight.css('right',scrollBarWidth + 'px')
        }else{
          $scrollWidth.hide()
          $tableHeaderDiv.css('overflow-y','hidden')
          $tableHeaderDiv.css('margin-right',0 + 'px')
          $tableHeaderFixedRight.css('right',0 + 'px')
          $tableBodyFixedRight.css('right',0 + 'px')
        }

        //判断是否有横向滚动条
        if(isScrollX){
          $tableBodyFixedLeft.css('bottom',scrollBarWidth + 'px')
          $tableBodyFixedRight.css({'bottom':scrollBarWidth + 'px'})
        }else{
          $tableBodyFixedLeft.css('bottom',0 + 'px')
          $tableBodyFixedRight.css({'bottom':0 + 'px'})
        }


        //获取每一行的高度，然后赋值给冻结的table中的tr
        $tableHeaderTr.each(function (i) {
          let height = $(this).height()
          $($frozenHeaderLeftTr[i]).css('height',height + 2)
          $($frozenHeaderRightTr[i]).css('height',height + 2)
        })
        $tableBodyTr.each(function (i) {
          let height = $(this).height()
          $($frozenBodyLeftTr[i]).css('height',height + 2)
          $($frozenBodyRightTr[i]).css('height',height + 2)
        })
        //滚动事件
        $tableBodyDiv.scroll(function () {
          let _this = $(this)
          let scrollTop = _this.scrollTop();//滚动高度 y轴
          let scrollLeft = _this.scrollLeft();//滚动高度 x轴
          if(scrollLeft == 0){
            $tableBodyFixedLeft.css('box-shadow','0 0 0 0')
          }else if(scrollLeft >= (tableHeaderWidth - tableWidth)){
            $tableBodyFixedRight.css('box-shadow','0 0 0 0')
          }else{
            $tableBodyFixedLeft.css('box-shadow','0 0 10px rgba(0, 0, 0, 0.12)')
            $tableBodyFixedRight.css('box-shadow','0 0 10px rgba(0, 0, 0, 0.12)')
          }
          $tableHeaderDiv.scrollLeft(scrollLeft)
          $tableBodyFixedLeft.scrollTop(scrollTop)
          $tableBodyFixedRight.scrollTop(scrollTop)
        })
      },
      //将表格规定列进行合并单元格
      getRowSpan(data){

      },
      //获取当前浏览器滚动条宽度
      getScrollbarWidth() {
        let odiv = document.createElement('div'),//创建一个div
          styles = {
            width: '100px',
            height: '100px',
            overflowY: 'scroll'//让他有滚动条
          }, i, scrollbarWidth;
        for (i in styles) odiv.style[i] = styles[i];
        document.body.appendChild(odiv);//把div添加到body中
        scrollbarWidth = odiv.offsetWidth - odiv.clientWidth;//相减
        odiv.remove();//移除创建的div
        return scrollbarWidth;//返回滚动条宽度
      }
    }
  }
</script>

<style lang="scss" scoped>
  .reportable {
    width: 100%;
    background: #fff;
    padding: 32px;
    h2 {
      font-size: 17px;
      font-weight: 600;
      letter-spacing: 1px;
      margin-bottom: 18px;
      float: left;
    }
  }
  #table-div{
    width: 100%;
    overflow: hidden;
    position: relative;
    border-top: none;
    table{
      border-collapse:collapse;
    }
    table,tr,th,td{
      border: 1px solid #EBEEF5;
      box-sizing: border-box;
      .table-centent{
        padding: 5px;
        box-sizing: border-box;
      }
    }
    table tr th{
      height: 50px;
    }

    .table-header-div{
      background: #f5f6fa;
      color: #000a2c;
      overflow-y: scroll;
      overflow-x: hidden;
    }

    .table-body-div{
      background: #fff;
      color: #838ca1;
      overflow: auto;
      max-height:800px;
    }
    .table-header-fixed-left{
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 5;
      table {
        background: #f5f6fa;
      }
    }
    .table-body-fixed-left{
      position: absolute;
      top: 0px;
      left: 0px;
      overflow: hidden;
      z-index: 4;
      color: #838ca1;
      table {
        margin-top: 50px;
        background: #fff;
      }
    }
    .table-header-fixed-right{
      position: absolute;
      top: 0px;
      right:0px;
      z-index: 5;
      table {
        background: #f5f6fa;
      }
    }
    .table-body-fixed-right {
      position: absolute;
      top: 0px;
      right:0px;
      overflow: hidden;
      z-index: 4;
      color: #838ca1;
      table {
        margin-top: 50px;
        background: #fff;
      }
    }

    .scroll-width {
      height: 51px;
      background: #f5f6fa;
      position: absolute;
      top: -1px;
      right: 0;
      border: 1px solid #EBEEF5;
    }
    .isLeft{
      text-align: left;
    }
    .isRight{
      text-align: right;
    }
    .isCenter{
      text-align: center;
    }
    .isMin{
      background: #1ac855;
      border-radius: 20px;
      color:#fff;
    }
    .isMax{
      background: #f96c6c;
      border-radius: 20px;
      color:#fff;
    }
    .isCenterValue{

    }
    .center-span{
      display: inline-block;
    }
  }
</style>